<!DOCTYPE html>
<html>

<head>
    <title>W3.CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@2.1.2/dist/plugins/css/pluginsCss.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@2.1.2/dist/plugins/plugins.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@2.1.2/dist/css/luckysheet.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@2.1.2/dist/assets/iconfont/iconfont.css' />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/luckysheet@2.1.2/dist/plugins/js/plugin.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/luckysheet@2.1.2/dist/luckysheet.umd.js"></script>
</head>

<body>

<div class="w3-container">
    <p>报表标题</p>
</div>

<div id="London" class="w3-container city" style="position: absolute;width: 100%;top:0;bottom: 0px;left:0px">
    <div id="luckysheet" style="margin:5px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;">
    </div>
</div>

<script type="text/javascript">
    function processData(data) {
      // 创建表头
      const headers = ["探针id", "设备名称", "设备ip", "机房名称", "设备类型", "槽位号", "单板类型", "带宽", "mib版本", "通信协议", "整机tcr版本", "主控程序", "主板主文件", "业务定义文件", "特征定义文件", "出境速率", "入境速率", "出境fifo速率", "入境fifo速率", "snmp状态", "tcp状态"];

      // 将数据转换为二维数组
      const rows = data.map(item => headers.map(header => {
        if (header === "设备ip") { // 特殊处理嵌套对象
          return item[header].value;
        }
        return item[header] || ''; // 处理null为''
      }));

      return [headers].concat(rows); // 将表头和数据合并
    }

    function fetchAndProcessData() {
      $.ajax({
        url: '/data/queryData',
        type: 'POST',
        success: function (response) {
          if (response.code === 200 && response.msg === "成功") {
            // 处理数据
            const processedData = processData(response.data);
            // 导入到Luckysheet
            luckysheet.create({
              container: 'luckysheet', // 容器ID
              data: [processedData], // 数据，二维数组
              showinfobar: false,
            });
          } else {
            console.error('获取数据出错:', response.msg);
          }
        },
        error: function (xhr, status, error) {
          console.error('请求数据失败:', status, error);
        }
      });
    }

    $(document).ready(function () {
      fetchAndProcessData(); // 页面加载完后获取并处理数据
    });
  </script>

</body>

</html>